<template>
  <div class="page">
    <div class="contentWrapper">
      <div class="logo">
        <img src="../imgs/logo.png" alt="">
      </div>
      <div id="searchForm">
        <input ref="searchTerm" type="text" name="searchTerm" id="searchTerm" @focus="changeFocusStatus(true)" @blur="changeFocusStatus(false)" v-model="searchTerm">
        <div class="searchIcon search" @click="searchTerm?redirect('List', {'searchTerm':searchTerm}):function(){}">
            <img class="img" src="../imgs/icons/btn-search.png" alt="search button">
        </div>
        <div class="cancelBtn" v-show="isFocusTerm && searchTerm && searchTerm != ''" @click.stop="clearTerm">
            <img src="../imgs/icons/cancel.png" alt="">
        </div>
        <div class="clearFix"></div>
      </div>
      <div class="microphone">
          <img class="img" src="../imgs/icons/btn-mic.png" alt="search button">
      </div>
      <!-- <div class="intro">
        涵盖中国全部法律领域的所有法律渊源，包括法律、行政法规、司法解释、部门规章及其他规范性文件，以及立法说明、学术文章；以每一个法律条文为“元规则”，对所有的法律渊源进行结构化重构，形成支持智能检索的“元规则大脑”；支持自然语言检索以及语音输入。
      </div> -->
    </div>
  </div>
</template>

<script>
import bgImgUrl from '../imgs/bg-home.png';
var vm;
export default {
  data() {
    return {
      searchTerm: '',
      isFocusTerm: false
    }
  },
  created() {
    vm = this;
  },
  mounted() {
    document.getElementsByTagName('html')[0].style.background = 'center/contain no-repeat url(' + bgImgUrl + ')'
  },
  methods: {
    redirect: function (pageName, requestParams) {
      vm.$router.push({ name: pageName, params: requestParams });
    },
    changeFocusStatus(status) {
      this.isFocusTerm = status;
    },
    clearTerm() {
        this.searchTerm = "";
        this.focusTerm();
    },
    focusTerm() {
        this.$refs.searchTerm.focus();
    },
  }
}
</script>

<style lang="scss" scoped>
.page {
  .contentWrapper {
    text-align: center;
    max-width: 640px;
    margin: 0 auto;
  }
  .logo {
    // padding-top: 1.8rem;
    padding-top: 1rem;
    img {
      width: 1.51rem;
    }
  }
  #searchForm {
    width: 3.45rem;
    height: .38rem;
    margin: .46rem auto 0;
    padding: .04rem;
    background: #efeff0;
    border: 1px solid #F66001;
    border-radius: 5px;
    position: relative;
    box-sizing: border-box;
    #searchTerm {
      border: none;
      color: #6b3c34;
      background: transparent;
      width: 100%;
      height: .3rem;
      line-height: .3rem;
      font-size: .2rem;
      float: left;
      box-sizing: border-box;
      padding: 0 .3rem 0 0;
      caret-color: #F66001;
      &:focus {
        outline:none;
      }
    }
    .cancelBtn {
      position: absolute;
      top: .04rem;
      right: .4rem;
    }
    .searchIcon {
      width: .2rem;
      height: .2rem;
      padding-top: .05rem;
      position: absolute;
      .img {
        width: .2rem;
      }
      &.search {
        right: .1rem;
      }
    }
  }
  .microphone {
    margin-top: .8rem;
    .img {
      width: .52rem;
      height: .52rem;;
    }
  }
  .clearFix {
    clear: both;
  }
}
</style>
